$(function () {
    var index = 0;
    $("#next").click(function () {
        index++;
        if (index > 4) {
            index = 0;
        }
        console.log(index);
        $("#list img").eq(index).fadeIn().siblings().fadeOut();
        $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
    })
    $("#prev").click(function () {
        index--;
        
        if (index < 0) {
            index = $("#list img").length-1;
        }
        console.log(index);
        $("#list img").eq(index).fadeIn().siblings().fadeOut();
        $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
    })
    $("#btns span").click(function(){
        let  i = $(this).index();
        console.log(i);
        // 点击焦点之后继续点右边的按钮，会出现图片乱跳的效果，
        // 就需要将外部的index重置与i相等，正好保证在点完焦点后继续点按钮不会出现乱序
        index = i;
        $("#list img").eq(i).fadeIn().siblings().fadeOut();
        $("#btns span").eq(i).addClass("current").siblings().removeClass("current");
    })
})
